<template>
  <div class="demo-title">image-preview/demo1</div>
  <div class="sscd-demo-row" @click="openPreview()">展示图片预览</div>
  <ImagePreview v-model:visible="imagePreview.visible" :images="imagePreview.datas" />
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import ImagePreview from '@sscd-mobile/image-preview'
  const imagePreview = reactive({
    visible: false,
    datas: [
      {
        src: 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-1.png',
      },
      {
        src: 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-2.png',
      },
      {
        src: 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-3.png',
      },
      {
        src: 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-4.png',
      },
      {
        src: 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-5.png',
      },
    ],
  })
  const openPreview = () => imagePreview.visible = true
</script>

<style lang="less" scoped></style>
